<template>
    <div class="common-layout">
       <el-container>
           <el-header class="header_activate">
            <el-dialog v-model="state.contentVisible" title="反馈内容详情" width="850px">           
                <el-text class="mx-1" size="large">{{state.feedbackContent}}</el-text>
                <template #footer>
                    <div class="dialog-footer">                        
                        <el-button type="primary" @click="state.contentVisible = false">关闭</el-button>    
                    </div>
                </template>
            </el-dialog>
                <h1>反馈审核</h1>
               <div class="search_activate" id="top_position"> 
                   <el-input v-model="state.input_user" placeholder="请输入手机/真名/反馈标题" />
                   <el-button type="warning" :icon="Search" @click="searchUserApplicationHandle"></el-button> 
               </div>
               <div class="filter">
                   <el-dropdown @command="handleCommand">
                       <span class="el-dropdown-link">
                           时间筛选
                       <el-icon class="el-icon--right">
                           <arrow-down />
                       </el-icon>
                       </span>
                       <template #dropdown>
                            <el-dropdown-menu>
                                    <el-dropdown-item command="0" >不限</el-dropdown-item>
                                <el-dropdown-item command="7">近7天</el-dropdown-item>
                                <el-dropdown-item command="15">近15天</el-dropdown-item>
                                <el-dropdown-item command="30">近30天</el-dropdown-item>
                                <el-dropdown-item command="90" disabled>近90天</el-dropdown-item>
                                <el-dropdown-item command="180" divided>近半年</el-dropdown-item>
                            </el-dropdown-menu>
                       </template>
                   </el-dropdown>
               </div>
           </el-header>
           <el-divider />
           <el-main>
               <el-table class="tableClass" :data="state.feedbackList" stripe                   
                   :header-cell-style="{ background: '#eef1f6', color: '#606266' }"                    
                    border
               > 
                   <el-table-column type="index" width="45" label="序" />
                   <el-table-column width="80" property="owner.real_name" label="姓名" />
                   <el-table-column width="125" property="owner.phone" label="手机" show-overflow-tooltip />
                   <el-table-column width="110" property="add_time" label="时间"/>                                 
                   <el-table-column width="70" label="内容"> 
                        <template #default="scope"> 
                            <el-button size="small" type="primary" @click="viewContentClick(scope.row.content)">详</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column width="80" label="附件">
                        <template #default="scope"> 
                            <div v-if="state.feedbackType=== '/adminCenter/questionFeedbackManage'">
                                <el-button size="small" type="primary" @click="viewQuestionDetailClick(scope.row.question)">题目</el-button>
                            </div> 
                            <div v-if="state.feedbackType=== '/adminCenter/guidePaperFeedbackManage'">
                                <el-button size="small" type="primary" @click="viewGuidePaperDetailClick(scope.row.paper.file)">导学案</el-button>
                            </div>
                        </template>
                    </el-table-column>                    
                    <el-table-column width="80" property="has_Read" label="已读"/>                 
               </el-table>              
               <el-pagination
               background
               layout="total, pre, pager, next"
               :total="state.total"                
               :page-size="state.pageSize"            
               @current-change="handleCurrentChange"
               />
           </el-main>
           <ViewQuestionDetail ref="viewQuestionDetailDialog" :question="state.question" />
           <ShowGuidePaperFileDialog ref="showGuidePaperFileDialog" :file="state.file" />
       </el-container>
   </div>
</template>
 
<script setup>
import { Search, Document, ArrowDown, Select, CloseBold } from '@element-plus/icons-vue'
import {onMounted, onUnmounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'
import ViewQuestionDetail from '@/views/ViewQuestionDetail.vue'
import ShowGuidePaperFileDialog from '@/components/ShowGuidePaperFileDialog.vue'
import { useRoute, useRouter } from 'vue-router'
import config from '~/config'

const feedbackList =['/adminCenter/generalFeekbackManage','/adminCenter/questionFeedbackManage','/adminCenter/guidePaperFeedbackManage',
  '/adminCenter/feedbackManage']
const route = useRoute()
const router = useRouter()
const showGuidePaperFileDialog=ref(null)
const viewQuestionDetailDialog = ref(null)
const state = reactive({
   input_user: '',
   days: 0,
   feedbackList: [],
   feedbackContent:'',
   contentVisible: false,
   total: 0, // 总条数
   currentPage: 1, // 当前页
   pageSize: 10, // 分页大小
   feedbackType: '/adminCenter/generalFeekbackManage', 
})
//监听路由变化
const unWatch = router.beforeEach((to, from, next) => {
    state.feedbackType=to.path;
    console.log("路由名：",state.feedbackType)
    if(feedbackList.includes(state.feedbackType)){
      getFeedback()  
    }    
    next(true)
})
//销毁页面去除监听
onUnmounted(()=>{
    unWatch()
})
// 加载页面初始化数据
onMounted(() => {
    getFeedback()
})
// 根据路由的路径不同，获取相应的后端api
const selectApi=()=>{
    if(state.feedbackType==='/adminCenter/generalFeekbackManage'){
        return `/FeedbackViewSet/`
    }else
    if(state.feedbackType==='/adminCenter/questionFeedbackManage'){
        return `/QuestionFeedbackViewSet/`
    }else
    if(state.feedbackType==='/adminCenter/guidePaperFeedbackManage'){
        return `/GuidePaperFeedbackViewSet/`
    }else
    if(state.feedbackType==='/adminCenter/feedbackManage'){
        return `/FeedbackViewSet/`
    }
}
// 点击详细内容
const viewContentClick=(content)=>{
    state.feedbackContent = content
    state.contentVisible = true
}
// 点击问题详情
const viewQuestionDetailClick=(question)=>{
    viewQuestionDetailDialog.value.open(question)
}
// 点击导学案详情
const viewGuidePaperDetailClick=(file)=>{
    file = config[import.meta.env.MODE].baseUrl_noapi + file 
    showGuidePaperFileDialog.value.open(file)
}
// 获取根据路由路径不同，获取相应的数据
const getFeedback=()=>{
   let params = {
       days: state.days,
       page: state.currentPage,
       size: state.size,
   }
   let api=selectApi()
   axios.get(api, {params}).then(res => {
    console.log('返回结果：',res)
       if(res.code==200){
           console.log("反馈：", res)
           state.feedbackList = res.data.results
           state.total = res.total
       }else{
           console.log("error", res)
       }
   })
   .catch((error)=>{
       console.log("获取错误：", error)
   })
}

//设置天数
const handleCommand=(command=7)=>{
   command = parseInt(command)
   state.days = command
   getApplicationsByDefault()
}

const searchUserApplicationHandle=()=>{
   getApplicationsBySearch()
}
// 滚到顶端
const scrollToTop=()=>{
   document.querySelector('#top_position').scrollIntoView(true);
}
//点击页码时触发
const handleCurrentChange = (newPage)=>{
   state.currentPage = newPage 
   reGetApplication()
   scrollToTop()
 }
 
</script>

<style scoped>
  .line-break{
  white-space: pre-wrap;
  width: 950px;
  font-size: 12px;
  }
 .search_activate {
   display: flex;
   flex-flow: row nowrap;
   /* justify-content: space-between; */
   align-items: center;
   margin: 0 auto;
   height: 30px;
 }
 .header_activate{
   display: flex;
   flex-flow: row nowrap;
   justify-content:flex-start;
   /* align-items: center; */
   padding: 0px;
   height: 30px;
   width:800px;
 }
 span{
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   font-size: medium;
 }
 .tableClass .cell{   
   padding: 0!important;
   height: 20px!important;
   line-height: 20px!important;
   text-align: center;
   font-size: 10px;
 }
</style>